<html>
    <head>
        <meta charset="UTF-8">
        <title>checkbox的全选和取消</title>
        <script type="text/javascript">

            function checkOrcancelAll(){
                //1、获取checkbox选中状态
                //1、1获取checkbox的元素
                var chElt = document.getElementById("chkElt");
                //1、2获取选中状态
                var checked = chkElt.checked;
                
                //2、1若checked=true ，将所有的复选框选中，若checked = false，将所有的复选框取消选中
                var allInsterests = document.getElementsByName("interest");
                //2、2遍历循环取出每一个复选框对象
                var mySpan = document.getElementById("mySpan");
                if(checked){
                    //全选
                    for(var i=0;i<allInsterests.length;i++){
                        //设置复选框的选中状态
                        allInsterests[i].checked = true;
                    }
                    mySpan.innerHTML = "取消全选";
                }else{
                    for(var i=0;i<allInsterests.length;i++){
                        //设置复选框的选中状态
                        allInsterests[i].checked = false;
                }
                mySpan.innerHTML = "全选";

            }
     }
        
        
        </script>
    </head>
    <body>
        <input type="checkbox" id="chkElt" onclick="checkOrcancelAll();"/>
        <span id="mySpan">全选</span><br>

        运动<input type="checkbox" name="interest" value="sport"/><br>
        旅游<input type="checkbox" name="interest" value="travel"/><br>
        美食<input type="checkbox" name="interest" value="foods"/><br>
        跳舞<input type="checkbox" name="interest" value="dance"/><br>
        音乐<input type="checkbox" name="interest" value="music"/><br>
        喝酒<input type="checkbox" name="interest" value="drink"/><br>
    </body>
</html>